<template>
  <div class="shopMessage">
    <h3>商家信息</h3>
    <ul>
      <li class="list">
        <span>品类</span>
        <span>{{shopLis.category}}</span>
      </li>
      <li class="list">
        <span>商家电话</span>
        <span>{{shopLis.phone}}</span>
      </li>
      <li class="list">
        <span>地址</span>
        <span>{{shopLis.address}}</span>
      </li>
      <li class="list">
        <span>营业时间</span>
        <span>{{shopLis.workTime}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['shopLis'])
  }
}
</script>
<style lang="less" scoped>
.shopMessage {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px;
  h3 {
    font-weight: 550;
    font-size: 16px;
  }
  ul {
    margin-top: 10px;
    .list {
      height: 40px;
      border-bottom: 1px solid #ccc;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      span {
        &:nth-child(1) {
          font-weight: 550;
        }
        &:nth-child(2) {
          color: #999;
        }
        font-size: 15px;
      }
    }
  }
}
</style>
